<template>
  <el-input
    v-model="value"
    :id="'w' + props.formCtrlId"
    :name="'w' + props.formCtrlId"
    :type="props.controlType"
    :size="props.size"
    :validate-event="props.validateEvent"
    :show-word-limit="props.showWordLimit"
    :clearable="props.clearable"
    :resize="props.resize"
    :disabled="props.disabled"
    @clear="mySubmit"
  ></el-input>
</template>

<script lang="ts" setup>
import FormItemCtrl from "@/components/form/formItem/FormItemCtrl";
import { BaseFormItem } from "@/components/form/formItem/FormItemMeta";

// vue3 script setup 暂时不允许在单独的文件中定义props接口.
// vue3 的bug 导致接口所继承的属性与方法不可读.
export interface TextProps extends BaseFormItem {
  modelValue: string | null;
  formCtrlId?: number; // 控件id, 区分组件
  colName?: string; // 字段名称
  isClear?: boolean; // 连续添加是否需要清空该字段
  controlType?: string; // 控件类型
  size?: string; // 尺寸 medium / small / mini
  optionList?: Array<unknown>; // 备用选项
  validateEvent?: boolean; // 输入时是否触发表单的校验
  showWordLimit?: boolean; // 是否显示输入字数统计
  clearable?: boolean; // 是否显示清空标记
  resize?: string; // 是否能被用户缩放 none, both, horizontal, vertical
  disabled?: boolean;
}

const props = withDefaults(defineProps<TextProps>(), {
  modelValue: "",
  formCtrlId: 10001,
  colName: "no",
  isClear: true,
  size: "default",
  controlType: "text",
  optionList: () => [],
  validateEvent: true,
  showWordLimit: true,
  clearable: true,
  resize: "none",
  disabled: false,
});

const emit = defineEmits(["update:modelValue", "myChange", "input", "change"]);

const { value, mySubmit } = FormItemCtrl(props, emit);
</script>
